<template>
  <div class="applist">
    <el-row :gutter="10">
      <el-col :span="6">
        <div class="apply-box">
          <div class="img">
            <img
              src="./images/cs.png"
              style="width: 100%;"
              alt=""
            >
          </div>
          <div class="img-hover">
            <img
              src="./images/cs-hover.png"
              style="width: 100%;"
              alt=""
            >
          </div>
          <div class="content">
            <div class="title">
              <div class="title1">国家超级计算长沙中心</div>
              <div class="title2">NATIONAL SUPERCOMPUTING CENTER IN CHANGSHA</div>
            </div>
            <div class="desc">
              国家超级计算长沙中心于2010年10月由科技部批准组建，成为继天津和深圳之后获批建设的第三家国家级超级计算中心
              。2010年11月28日，以“天河一号”为计算设备的国家超级计算长沙中心在湖南大学正式奠基。2014年11月4日正式运营。
            </div>
            <div
              class="btn is-active"
              @click="createDialog=true"
            >申请资源</div>
          </div>
          <div class="hover-bg"></div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="apply-box">
          <div class="img">
            <img
              src="./images/gz.png"
              style="width: 100%;"
              alt=""
            >
          </div>
          <div class="img-hover">
            <img
              src="./images/gz-hover.png"
              style="width: 100%;"
              alt=""
            >
          </div>
          <div class="content">
            <div class="title">
              <div class="title1">国家超级计算广州中心</div>
              <div class="title2">NATIONAL SUPERCOMPUTING CENTER IN GUANGZHOU</div>
            </div>
            <div class="desc">
              国家超级计算广州中心位于广州大学城的中山大学东校区，广州超级计算中心将建设成为融高性能计算、海量数据处理、信息管理服务于一体的世界一流的超算中心，为广州、广东乃至华南地区的经济社会发展提供强大引擎。
            </div>
            <div class="btn">申请成功</div>
          </div>
          <div class="hover-bg"></div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="apply-box">
          <div
            class="img"
            style="padding:0 10px"
          >
            <img
              src="./images/ks.png"
              style="width: 100%;"
              alt=""
            >
          </div>
          <div class="img-hover">
            <img
              src="./images/ks-hover.png"
              style="width: 100%;"
              alt=""
            >
          </div>
          <div class="content">
            <div class="title">
              <div class="title1">国家超级计算昆山中心</div>
              <div class="title2">NATIONAL SUPERCOMPUTING CENTER IN KUNSHAN</div>
            </div>
            <div class="desc">
              国家超级计算昆山中心于2020年，总投资20多亿元的国家超级计算昆山中心建设项目顺利通过科技部组织的专家验收，成为江苏省第二个、国家第八个超级计算中心。昆山超算中心集成了中国科学院相关领域的最新科研成果，与科学院中国科技云资源相衔接，成为共享超级计算平台。
            </div>
            <div class="btn">申请中</div>
          </div>
          <div class="hover-bg"></div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="apply-box">
          <div class="img">
            <img
              src="./images/jn.png"
              style="width: 100%;"
              alt=""
            >
          </div>
          <div class="img-hover">
            <img
              src="./images/jn-hover.png"
              style="width: 100%;"
              alt=""
            >
          </div>
          <div class="content">
            <div class="title">
              <div class="title1">国家超级计算济南中心</div>
              <div class="title2">NATIONAL SUPERCOMPUTING CENTER IN JINAN</div>
            </div>
            <div class="desc">
              国家超级计算济南中心2011年10月27日在济南正式揭牌。该中心建有中国首台全部采用国产CPU和系统软件构建的千万亿次计算机系统，标志着中国成为继美国、日本之后能够采用自主CPU构建千万亿次计算机的国家。2011年3月开始建设，建成并投入运行。
            </div>
            <div class="btn">申请成功</div>
          </div>
          <div class="hover-bg"></div>
        </div>
      </el-col>
    </el-row>
    <transition name="el-fade-in">
      <applyResource
        v-if="createDialog"
        @close="createDialog=false"
      ></applyResource>
    </transition>
  </div>
</template>

<script>
  import applyResource from './applyResource'
  export default {
    components: { applyResource },
    data () {
      return {
        createDialog: false
      }
    }
  }
</script>

<style lang="scss" scoped>
.apply-box {
  width: 100%;
  min-width: 340px;
  margin: 0 auto;
  height: 400px;
  background: url(./images/borderbg.png) no-repeat;
  background-size: 100% 100%;
  // border-image: linear-gradient(180deg, #ffffff, #c1b0ff 100%) 1 1;
  position: relative;
  cursor: pointer;
  &:hover {
    color: #ffffff;
    .desc {
      padding: 30px 40px;
      color: #ffffff;
    }
    .img {
      display: none;
    }
    .img-hover {
      display: block;
    }
    .title::after {
      background: url(./images/line-active.png) no-repeat;
    }
    .hover-bg {
      display: block;
    }
  }
  &.cs {
    // background: url(./images/csbg.png) no-repeat bottom center;
    background-size: 100%;
  }
  .title {
    text-align: center;
    position: relative;
    .title1 {
      font-size: 24px;
      line-height: 1;
    }
    .title2 {
      font-size: 12px;
      transform: scale(0.8);
    }
    &::after {
      position: absolute;
      content: ' ';
      width: 160px;
      height: 1px;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      background: url(./images/line.png) no-repeat;
    }
  }
  .desc {
    padding: 30px 40px;
    color: #999999;
    text-align: justify;
    font-weight: 300;
    line-height: 22px;
    height: 180px;
  }
  .btn {
    display: block;
    margin: 0 40px;
    height: 40px;
    background: #ffffff;
    border: 1px solid rgba(51, 49, 126, 0.5);
    border-radius: 4px;
    text-align: center;
    font-size: 18px;
    color: #33317e;
    &.is-active {
      background: linear-gradient(270deg, #33317e, #5a58c5);
      box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
      border: none;
      color: #ffffff;
    }
  }
  .img {
    position: absolute;
    width: 100%;
    min-width: 340px;
    padding: 0 2px;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    overflow: hidden;
  }
  .img-hover {
    display: none;
    position: absolute;
    width: 100%;
    min-width: 340px;
    padding: 0 2px;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    overflow: hidden;
  }
  .content {
    position: absolute;
    z-index: 10;
    top: 50%;
    padding-top: 50px;
    transform: translateY(-50%);
  }
  .hover-bg {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px;
    background: url(./images/hover.png) no-repeat center;
    background-size: 100% 100%;
    // box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25);
    z-index: 1;
  }
}
</style>
